const React = require('react');
const createReactClass = require('create-react-class');
const {
  View,
  StyleSheet,
  FlatList,
  ScrollView,
} = require('react-native');
const {
  JDScrollView,
  JDText,
  JDRouter,
  JDButton,
  JDTouchable,
} = require('@areslabs/jdreact-core-lib');
const { NavigationBar } = JDRouter;

function getMockData(index) {
  let result = [];
  for(let i = 0; i < index; i++) {
    result.push({
        id:i,
        title:`Hello ${i}`
    });
  }
  return result;
}

const PullFlatList = createReactClass({
  displayName: 'PullFlatList',

  getInitialState() {
    //this.ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    return {
      isRefreshing: false,
      listData: getMockData(20),
      tab:0
    }
  },

  storeData: [{num:20,y:0},{num:30,y:0},{num:40,y:0},{num:50,y:0}],

  render() {
    return (
      <View style={styles.wrapper}>
        <NavigationBar Title="ListView" />
        <FlatList
          ref={(flatList) => {
            this.flatListView = flatList;
          }}
          style={styles.wrapper}
          contentContainerStyle={styles.contentContainerStyle}
          data={this.state.listData}
          renderItem={this._renderRow}
          keyExtractor={this._keyExtractor}
          stickyHeaderIndices={[1]}
          onScroll={this._onScroll}
        />
      </View>
    );
  },

  _keyExtractor (item, index) {
    return String(item.id);
  },

  _resetData(index){
    let num = this.storeData[index].num
    let listData = getMockData(num)
    this.setState({
      tab:index,
      listData:listData,
    })
    setTimeout(()=>{
      this.flatListView.scrollToOffset({ animated: false, offset: this.storeData[index].y });
    },0)
  },

  _onScroll (e) {
    let { contentOffset, contentSize } = e.nativeEvent;
    let y = contentOffset.y;
    this.storeData[this.state.tab].y = y
  },

  _renderRow({index,item}) {
    if(index===0){
      return (
        <View style={{height:200,backgroundColor:'#666666'}}>

        </View>
      )
    }
      if(index==1){
          return (
          <ScrollView key={12300}
          horizontal = {true}
          style={{height:40,backgroundColor:'#000000'}}>
            <View >
              <JDButton onPress={()=>this._resetData(0)}>
                <JDText>按钮一</JDText>
              </JDButton>
            </View>
            <View style={{marginLeft:240}}>
              <JDButton onPress={()=>this._resetData(1)}>
                <JDText>按钮二</JDText>
              </JDButton>
            </View>
            <View style={{marginLeft:240}}>
              <JDButton onPress={()=>this._resetData(2)}>
                <JDText>按钮3</JDText>
              </JDButton>
            </View>
            <View style={{marginLeft:240}}>
              <JDButton onPress={()=>this._resetData(3)}>
                <JDText>按钮4</JDText>
              </JDButton>
            </View>
          

          </ScrollView>
          )
      }
     return (
        <JDTouchable contentContainerStyle={styles.row} onPress={() => { alert(item.id); }}>
        <JDText>{item.title}</JDText>
      </JDTouchable>
    );
  },

  onRefresh() {
    this.setState({
      isRefreshing: true,
    });
    setTimeout(() => {
        this.setState({
          isRefreshing: false,
          listData: getMockData()
        });
    }, 3000);
  },
});

const styles = StyleSheet.create({
  wrapper: {
    flex: 1,
  },
  contentContainerStyle: {
    backgroundColor: 'rgba(0, 0, 0, 0.1)',
  },
  row: {
      height: 100,
      borderColor: '#F00',
      borderWidth: 1,
      marginVertical: 10,
  }
});

module.exports = PullFlatList;
